<template>
    <div class="map">
        <!-- 给地图加点击事件getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
        <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom是视图比例 -->
        <baidu-map
                class="bmView"
                :scroll-wheel-zoom="true"
                :zoom="zoom"
                center="沈阳"
                @click="getLocationPoint"
                ak="YOUR_APP_KEY"
        >
            <bm-view style="width: 100%; height:150px; flex: 1"></bm-view>
            <!--<van-search v-model="addressKeyword" placeholder="请输入搜索地点"/>-->
            <bm-local-search :keyword="addressKeyword"
                             @markersset="markerssetAction"
                             @infohtmlset="infohtmlsetAction"
                             @searchcomplete="searchcompleteAction"
                             :auto-viewport="true"
                             :pageCapacity="10"
                             :forceLocal="true"
                             :panel="false"
                             :location="locationName"></bm-local-search>
        </baidu-map>
        <input ref="search" class="search-input" @focus="bodyScrollTop" @blur="bodyScrollTop" type="text" v-model='addressKeyword'
               placeholder="请输入居住小区名称">
        <div class="search-result">
            <div class="search-item" v-for="(item, index) in searchList" :key="index">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="address">{{ item.address }}</div>
                </div>
                <div class="right">
                    <div class="van-button van-button--primary van-button--mini" @click="selectMapAction(item)">选择</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'TabsMap',
  data () {
    return {
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12,
      addressKeyword: '',
      locationName: '沈阳',
      searchList: []
    }
  },
  props: {
    mapType: {
      type: String,
      default: () => {
        return ''
      }
    },
    mapIndex: {
      type: Number,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    // 去苹果机型白边
    bodyScrollTop () {
      winToTop()
      // document.body && (document.body.scrollTop = 0)
    },
    getLocationPoint (e) {
      this.lng = e.point.lng
      this.lat = e.point.lat
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng
        this.selectedLat = point.lat
      })
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log(res)
      })
    },
    markerssetAction (data) {
      console.log(data)
    },
    infohtmlsetAction (data) {
      console.log(data, 'infohtmlsetAction')
    },
    searchcompleteAction (data) {
      if (!this.$common.xeUtils.isEmpty(data.Br) && data.Br.length > 0) {
        this.searchList = data.Br
      } else if (!this.$common.xeUtils.isEmpty(data.Ir) && data.Ir.length > 0) {
        this.searchList = data.Ir
      } else {
        this.searchList = []
      }
      console.log(this.addressKeyword)
      if (this.addressKeyword !== '' && this.addressKeyword !== undefined && this.addressKeyword !== null) {
        let addressItem = {
          title: this.addressKeyword,
          address: this.addressKeyword,
          province: '辽宁省',
          city: '沈阳市',
          point: {
            lng: '0.0',
            lat: '0.0'
          }
        }
        console.log(addressItem)
        this.searchList.push(addressItem)
      }
    },
    selectMapAction (data) {
      this.$emit('mapChangeAction', data, this.mapType, this.mapIndex)
    }
  },
  mounted () {
    this.$refs.search.focus()
  }
}
</script>

<style scoped lang="less">

    .search-input {
        outline-style: none;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 7px 7px;
        width: 96%;
        font-size: 14px;
        font-weight: 700;
        font-family: "Microsoft soft";
    }

    .search-input:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
    }

    .map {
        background-color: white;
        height: 100%;
    }

    .search-result {
        overflow: scroll;
    }

    .search-item {
        border-bottom: 1px solid #9d9d9d;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 80%;

            .title {
                font-weight: bold;
            }

            .address {
                font-size: 12px;
            }
        }

        .right {
            width: 20%;
        }
    }
</style>
